<template>
  <div class="video">
    <div class="con">{{video}}</div>
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="550" height="400" id="Untitled-1" align="middle"> 
    <param name="allowScriptAccess" value="sameDomain" /> 
    <param name="movie" value="test.swf" /> 
    <param name="quality" value="high" /> 
    <param name="bgcolor" value="#ffffff" /> 
    <embed src="http://localhost:8080/test.fla" quality="high" bgcolor="#ffffff" width="550"    height="400" name="mymovie" align="middle" allowScriptAccess="sameDomain"    type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> 
    </object>
    <div class="video-wrap">
      <video-player class="vjs-custom-skin" :options="playerOptions"></video-player>
    </div>
  </div>
</template>

<script>
// require styles
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
// video-player
import { videoPlayer } from 'vue-video-player'
// rtmp video-flash
import 'videojs-flash'
export default {
  name: 'video-sel',
  data () {
    return {
      video: 'hello video',
      playerOptions: {
        height: '260',
        language: 'en',
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        sources: [{
          type: "rtmp/avi",
          src: "http://localhost:8080/教学主场景.avi"
        }],    
        flash: {
            hls: { withCredentials: false },
            fla: 'http://localhost:8080/教学主场景.fla' // 引入静态文件swf
          },
        techOrder: ['flash'],
        autoplay: false,
        controls: true,
        poster: "http://localhost:8080/JAVA.jpg",
        notSupportedMessage: '不支持的视频格式'
      }
    }
  },
  components: {
    videoPlayer
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="less" scoped>
.video {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .con {
    width: 100%;
    height: 30px;
    line-height: 30px;
  }
  .video-wrap {
    width: 500px;
    height: 300px;
  }
}
</style>